<template>
	<navigator
	  class="goods_item"
	  :url="'/pages/goods_detail/index?goods_id='+ item.goods_id"
	>
	  <!--
	    三种解决方案:
	      1. v-if
	      2. 三元表达式
	      3. 短路运算 ||  
	  -->
	  <image class="goods_item_image" :src="item.goods_small_logo || '/static/empty.png'"></image>
	  <view class="goods_item_info">
	    <view class="goods_item_info_name">
	      {{ item.goods_name }}
	    </view>
	    <view class="goods_item_info_price">
	      {{ item.goods_price }}
	    </view>
	  </view>
	</navigator>
</template>

<script>
	export default {
    props:{
      // 父组件传过来的 item
      item:{
        // 限定 item 的数据类型为对象
        type:Object
      }
    },
	}
</script>

<style lang="less">
	.goods_item{
	  display: flex;
	  padding: 10rpx 10rpx 10rpx 20rpx;
	}
	.goods_item_image{
	  width: 190rpx;
	  height: 190rpx;
	  flex-shrink: 0;
	  margin-right: 30rpx;
	}
	.goods_item_info{
	  font-size: 24rpx;
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  padding: 20rpx 0;
	}
	.goods_item_info_name{
	  overflow : hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	}
	.goods_item_info_price{
	  color:var(--mainColor);
	  &::before{
	    content: "¥";
	    font-size: 80%;
	    margin-right: 2rpx;
	  }
	}
</style>
